<template>
    <div class="goodList">
        <head-top></head-top>
        <div class="body">
            <div class="seach">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="商品名称">
                        <el-input v-model="formInline.user" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-select v-model="formInline.region" placeholder="请选择">
                            <el-option label="默认排序" value="shanghai"></el-option>
                            <el-option label="在售价最低" value="shanghai"></el-option>
                            <el-option label="月销量最高" value="beijing"></el-option>
                            <el-option label="月销量最低" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="formInline.state" placeholder="请选择">
                            <el-option label="上架" value="1"></el-option>
                            <el-option label="下架" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动时间">
                        <el-date-picker
                            v-model="formInline.time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="库存">
                        <el-input v-model="formInline.inventoryStart" style="width:100px" placeholder=""></el-input> 至
                        <el-input v-model="formInline.inventoryEnd" style="width:100px" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="formInline.priceStart" style="width:100px" placeholder=""></el-input> 至
                        <el-input v-model="formInline.priceEnd" style="width:100px" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="primary" @click="add">新增商品</el-button>
                        <el-button type="primary">批量操作</el-button>
                        <el-button type="primary">导出</el-button>
                    </el-form-item>
                </el-form> 
            </div>
            <div class="table">
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    border
                    style="width: 100%">
                     <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        prop="itemNo"
                        label="商品ID">
                    </el-table-column>
                    <el-table-column
                        prop="catName"
                        label="商品名称">
                    </el-table-column>
                    <el-table-column 
                        label="商品图片"
                        prop="picUrl">
                        <template slot-scope="scope">
                            <img :src="scope.row.picUrl" style="width: 100px;height: 100px">
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="price"
                        label="在售价格">
                    </el-table-column>
                    <el-table-column
                        prop="stockNum"
                        label="当前库存">
                    </el-table-column>
                    <el-table-column label="上/下架" >
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.menusstate"
                                active-value="1"
                                inactive-value="0">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" >
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>                  
                </el-table>
            </div>
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next"
                    :total="400">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import headTop from '../../components/headTop'
    import {findGoodsByStatus} from '@/api/getData'
        export default {
        data(){
            return {
                formInline: {
                    user: '',
                    region: '',
                    state:"1",
                    time: '',
                    inventoryStart:"",
                    inventoryEnd:"",
                    priceStart:"",
                    priceEnd:""
                },
                loading: true,
                tableData: []
            }
        },
        components: {
    		headTop,
    	},
        created(){
            this.loading = true;
        	this.getFoods();
        },
        computed: {
        	
        },
        methods: {
            onSubmit() {
                this.getFoods()
                console.log(this.formInline);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            add(){
                this.$router.push('addgoods')
            },
            async getFoods(){
                const Foods = await findGoodsByStatus({state: this.formInline.state});
                this.tableData = [];
                this.tableData = Foods.data;
                this.loading = false;
            },
        },
    }
</script>
<style lang="less">
    .body{
        padding: 0 20px;
    }
    .seach{
        padding-top: 15px;
    }
    .table{
        margin-top: 15px;
    }
    .block{
        margin-top: 15px;
        padding-bottom: 30px;
    }
</style>